<template>
    <div class="search-suggestion-container">
        <van-cell 
            v-for="(item,index) in suggestionLists" 
            :key="index" 
            :title="item" 
            icon="search"
            @click="$emit('search',item)">
            <van-icon name="delete" />
            <div slot="title" v-html="highlight(item)"></div>
        </van-cell>
    </div>
    <!-- 
        实现联想数据点击的时候触发，一个search（searchText）的方法，在父组件（index）绑定这个方法，
        把点击的内容的标题传递过去，触发onSearch（searchText）这个方法，修改this.searchText 的内容
     -->
</template>

<script>
import { reqSearchSuggestionLists } from '@/api/search'
import { debounce } from 'lodash'
    export default {
        name:'searchSuggestion',
        props:{
            searchText:{
                type: String,
                required: false
            }
        },
        data() {
            return {
                suggestionLists:[],  //联想建议的数据列表
            }
        },
        methods: {
            // 处理字符串的高亮显示,通过str.replace() 方法实现,配合正则表达式和v-html
            // new RegExp(第一个参数是字符串，第二个参数是正则表达式)
            highlight(str){
                return str.replace(new RegExp(this.searchText,'gi'),`<span style="color:red">${this.searchText}</span>`)
            }
        },
        watch:{
            // 完整写法，监听searchText数据的变化，设置immediate: true的时候组件注册完成的时候自动调用一次这个方法，以后当数据改变再调用此方法
            searchText:{
                handler: debounce(async function (){
                    const { data } = await reqSearchSuggestionLists(this.searchText);
                    this.suggestionLists = data.data.options;
                },200),
                immediate: true
            }
        }
    }
</script>

<style lang="less" scoped>

</style>